<template>
  <div class="Sakura">
    <canvas id="canvas_sakura" ref="canvas_sakura" :style="{ zIndex: zIndex }"></canvas>
  </div>
</template>

<script>
class Sakura {
  constructor (x, y, s, r, fn, that, img) {
    this.x = x
    this.y = y
    this.s = s
    this.r = r
    this.fn = fn
    this.that = that
    this.img = img
  }

  draw (cxt) {
    cxt.save()
    // eslint-disable-next-line no-unused-vars
    const xc = 40 * this.s / 4
    cxt.translate(this.x, this.y)
    cxt.rotate(this.r)
    cxt.drawImage(this.img, 0, 0, 40 * this.s, 40 * this.s)
    cxt.restore()
  }

  update () {
    this.x = this.fn.x(this.x, this.y)
    this.y = this.fn.y(this.y, this.y)
    this.r = this.fn.r(this.r)
    if (this.x > window.innerWidth ||
      this.x < 0 ||
      this.y > window.innerHeight ||
      this.y < 0
    ) {
      this.r = this.that.getRandom('fnr')
      if (Math.random() > 0.4) {
        this.x = this.that.getRandom('x')
        this.y = 0
        this.s = this.that.getRandom('s')
        this.r = this.that.getRandom('r')
      } else {
        this.x = window.innerWidth
        this.y = this.that.getRandom('y')
        this.s = this.that.getRandom('s')
        this.r = this.that.getRandom('r')
      }
    }
  }
}
class SakuraList {
  constructor () {
    this.list = []
  }

  push (sakura) {
    this.list.push(sakura)
  }

  update () {
    for (let i = 0, len = this.list.length; i < len; i++) {
      this.list[i].update()
    }
  }

  draw (cxt) {
    for (let i = 0, len = this.list.length; i < len; i++) {
      this.list[i].draw(cxt)
    }
  }

  get (i) {
    return this.list[i]
  }

  size () {
    return this.list.length
  }
}
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Sakura',
  data () {
    return {
      staticx: false,
      stop: null,
      num: 50,
      show: true,
      zIndex: 0
    }
  },
  mounted () {
    this.$nextTick(() => {
      if (this.show) {
        this.startSakura()
      }
    })
  },
  methods: {
    getRandom (option) {
      let ret, random
      switch (option) {
        case 'x':
          ret = Math.random() * window.innerWidth
          break
        case 'y':
          ret = Math.random() * window.innerHeight
          break
        case 's':
          ret = Math.random()
          break
        case 'r':
          ret = Math.random() * 6
          break
        case 'fnx':
          random = -0.5 + Math.random() * 1
          // eslint-disable-next-line no-unused-vars
          ret = function (x, y) {
            return x + 0.15 * random - 1.7 * 0.3
          }
          break
        case 'fny':
          random = 1.5 + Math.random() * 0.7
          ret = function (x, y) {
            return y + 0.3 * random
          }
          break
        case 'fnr':
          random = Math.random() * 0.03
          ret = function (r) {
            return r + random
          }
          break
      }
      return ret
    },
    startSakura () {
      const that = this
      // eslint-disable-next-line no-global-assign
      requestAnimationFrame = window.requestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        window.oRequestAnimationFrame
      const canvas = document.getElementById('canvas_sakura')
      this.staticx = true
      this.$refs.canvas_sakura.width = window.innerWidth
      this.$refs.canvas_sakura.height = window.innerHeight
      const cxt = this.$refs.canvas_sakura.getContext('2d')
      const sakuraList = new SakuraList()
      const img = new Image()

      // img.src = '/Hundred-refining-into-Immortals/sakura.png' // 樱花效果图相对路径
      img.src = ''

      for (let i = 0; i < that.num; i++) {
        const randomX = this.getRandom('x')
        const randomY = this.getRandom('y')
        const randomR = this.getRandom('r')
        const randomS = this.getRandom('s')
        const randomFnx = this.getRandom('fnx')
        const randomFny = this.getRandom('fny')
        const randomFnR = this.getRandom('fnr')
        const sakura = new Sakura(randomX, randomY, randomS, randomR, {
          x: randomFnx,
          y: randomFny,
          r: randomFnR
        }, this, img)
        sakura.draw(cxt)
        sakuraList.push(sakura)
      }
      this.stop = requestAnimationFrame(function fn () {
        cxt.clearRect(0, 0, canvas.width, canvas.height)
        sakuraList.update()
        sakuraList.draw(cxt)
        that.stop = requestAnimationFrame(fn)
      })
    },
    stopp () {
      if (this.staticx) {
        const child = document.getElementById('canvas_sakura')
        child.parentNode.removeChild(child)
        window.cancelAnimationFrame(this.stop)
        this.staticx = false
      } else {
        this.startSakura()
      }
    }
  }
}
</script>

<style scoped>
#canvas_sakura {
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
}
</style>
